import React, { PureComponent } from "react";
import s from "./index.scss";
import { Flex } from "antd-mobile";

import bao3 from "assets/images/bao3.png";
import look from "assets/images/threeapp/look.png";
import zt1 from "assets/images/threeapp/zt1.png";
import golook from "assets/images/golook.png";
import baoxian2 from "assets/images/threeapp/baoxian2.png";
import zzxq from "assets/images/zzxq.png";

import QueueAnim from 'rc-queue-anim'
import Modal from "antd/lib/Modal";



export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible:false,
      dialogTitle: "债券转让规则",
    };
  }
  
  componentDidMount() {
  
  }
   //销毁时解绑事件
  componentWillUnmount() {
    //重写组件的setState方法，直接返回空
    this.setState = (state,callback)=>{
      return;
    };  
  }
  handleCancel() {
    this.setState({
      visible: false
    });
  }
  

  render() {
    let {detail} = this.props
    console.log(detail)
    return (
      <div>
      <QueueAnim type="bottom" leaveReverse>
       <Flex className={`${s.one}`}  key="a">
            <Flex.Item>
              <Flex direction="column">
                <Flex.Item
                  className={`${s.oneATop} ${s.oneTopBox} ${s.baoParent}`}
                >
                  {detail.annualInterestRate}% <img className={`${s.bao}`} src={bao3} />
                </Flex.Item>
                <Flex.Item>原标收益率</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
              <Flex direction="column">
                <Flex.Item className={`${s.oneTopBox}`}>{detail.termcount}个月</Flex.Item>
                <Flex.Item>剩余期限</Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item>
             
            </Flex.Item>
          </Flex>

          <Flex
            direction="row"
            justify="end"
            align="center"
            className={`${s.tow}`}
            style={{
              background: `url(${zt1}) no-repeat`,
              "backgroundSize": "100% 100%",
              position:"relative"
            }}
            key="b"
          >
            <div
              className={`${s.towCircle}`}
              style={{
                background: `linear-gradient(to top, #93C9FF ${detail.progress}%, rgb(255, 255, 255) 0px,#fff ${detail.progress}%)`
              }}
            >
              {detail.progress}%
            </div>
            
            <div style={{position: "absolute",left: "0.3rem",color: "#fff"}}>{detail.annualInterestRate}%<br/>折让比例 </div>

          </Flex>
          <Flex
            direction="row"
            justify="center"
            align="center"
            className={`${s.three}`}
            key="c"
          >
            <img src={baoxian2} />
            <span>账户资金安全由太平洋保险承保</span>
          </Flex>
          <div className={`${s.four}`} key="d">
          <QueueAnim type={['right', 'left']} leaveReverse>
            <Flex className={`${s.item}`} key="a">
              <Flex.Item>项目名称</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.title}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="b">
              <Flex.Item>已转让金额</Flex.Item>
              <Flex.Item className={`${s.right}`}>¥{detail.biddingAmount}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="d">
              <Flex.Item>可投金额</Flex.Item>
              <Flex.Item className={`${s.right}`}>¥{detail.investleft}</Flex.Item>
            </Flex>

            <Flex className={`${s.item}`} key="e">
              <Flex.Item>还款方式</Flex.Item>
              <Flex.Item className={`${s.right}`}>{detail.productType}</Flex.Item>
            </Flex>

            </QueueAnim>
          </div>
          <Flex direction="column" key="e">
              <div style={{height:"1rem",padding:"0.15rem",background:"#fff",fontSize:'0.12rem'}}>债权转让是安心投平台为广大投资人推出的一项投资退出服务，投资人可将其持有的符合一定条件的债权转让给其他投资人，实现获取现金的目的。
                <span style={{textDecoration: "underline",color: "#409FFF"}} onClick={()=>{
                  this.setState({
                    visible:true
                  })
                }}>查看债权转让细则</span>
              </div>
              <div style={{height:"1.2rem",padding:"0.15rem",background:"#F2F9FF"}}><img src={zzxq} style={{width:"100%"}}/></div>
            </Flex>
          <Flex  key="f" direction="row" align="center">
              <Flex.Item className={`${s.center} ${s.lookDetail}`}>
                <img src={golook}/>
              </Flex.Item>
          </Flex>
         
        </QueueAnim>
    
     <Modal
          wrapClassName={`${s.vertical}`}
          title={this.state.dialogTitle}
          visible={this.state.visible}
          onCancel={this.handleCancel.bind(this)}
          footer={null}
          className={`${s.antmodal}`}
        >
          <div
            className={`${s.tipBox}`}
            style={{ height: "2.4rem", overflowY: "scroll" }}
          >
            <div className={`color26`}>1.债权转让条件是什么？</div>
            <div>距离债权持有日超过30天，距离债权到期日超过30天即可转让。</div>
            <div  className={`color26`}>
            2.如何认购？
            </div>
            <div >
            认购人可一次性认购全部或部分债权。
            </div>
            <div  className={`color26`}>
            3.什么是折让率？
            </div>
            <div >
            债权持有人通过本金打折的方式低价卖出债权，该折扣比率即为折让率。
            </div>
            <div className={`color26`}>
            4.认购成功的债权可二次转让吗？
            </div>
            <div>
            可以二次转让，但必须符合债权转让条件。
            </div>
            <div className={`color26`}>5.转让人是否可以主动撤销发布的债权？</div>
            <div>不可主动撤销。</div>
            <div className={`color26`}>6.认购债权转让时可不可以使用奖励金？</div>
            <div>不可主动撤销。</div>
            <div className={`color26`}>7.债权转让的手续费是多少？</div>
            <div>安心投平台向债权转出人收取债权实际成交额对应本金的千分之五的手续费；而不向债权受让人收取任何费用。</div>
            <div className={`color26`}>8.债权转让的方式？</div>
            <div>登录安心投官方网站(51anxintou.com)，进入“我的账户”，即可查看并操作债权转让。</div>
          </div>
        </Modal>
      </div>
    );
  }
}
